<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{admin/layout}">
<head>
    <title>统计报表</title>
    <link rel="stylesheet" href="/css/daterangepicker.css">
    <script src="/js/moment.min.js"></script>
    <script src="/js/daterangepicker.js"></script>
    <script src="/js/echarts.min.js"></script>
</head>
<body>
<div layout:fragment="content">
    <div class="container-fluid">
        <!-- 时间范围选择 -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h4 class="mb-0">统计报表</h4>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="input-group">
                            <input type="text" id="daterange" class="form-control" 
                                   th:value="${startTime + ' - ' + endTime}"/>
                            <button class="btn btn-primary" onclick="exportReport()">
                                <i class="fas fa-download"></i> 导出报表
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据概览 -->
        <div class="row">
            <div class="col-xl-3 col-md-6">
                <div class="card bg-primary text-white mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0">总订单数</h6>
                                <h2 class="mb-0" th:text="${data.orderStatistics.totalOrders}">0</h2>
                            </div>
                            <i class="fas fa-shopping-cart fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card bg-success text-white mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0">总重量(kg)</h6>
                                <h2 class="mb-0" th:text="${#numbers.formatDecimal(data.orderStatistics.totalWeight, 1, 2)}">0</h2>
                            </div>
                            <i class="fas fa-weight fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card bg-info text-white mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0">总收入(元)</h6>
                                <h2 class="mb-0" th:text="${#numbers.formatDecimal(data.orderStatistics.totalIncome, 1, 2)}">0</h2>
                            </div>
                            <i class="fas fa-yuan-sign fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card bg-warning text-white mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0">平均处理时间(分钟)</h6>
                                <h2 class="mb-0" th:text="${data.orderStatistics.avgProcessTime}">0</h2>
                            </div>
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row">
            <!-- 订单趋势图 -->
            <div class="col-xl-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-line me-1"></i>
                        订单趋势
                    </div>
                    <div class="card-body">
                        <div id="orderTrendChart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <!-- 物品分布图 -->
            <div class="col-xl-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-pie me-1"></i>
                        物品分布
                    </div>
                    <div class="card-body">
                        <div id="itemDistributionChart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 排名区域 -->
        <div class="row">
            <!-- 回收员排名 -->
            <div class="col-lg-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-user me-1"></i>
                        回收员排名
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="collectorTable">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>姓名</th>
                                        <th>订单数</th>
                                        <th>评分</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 回收站排名 -->
            <div class="col-lg-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-building me-1"></i>
                        回收站排名
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="stationTable">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>名称</th>
                                        <th>订单数</th>
                                        <th>重量(kg)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 区域排名 -->
            <div class="col-lg-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-map-marker-alt me-1"></i>
                        区域排名
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="areaTable">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>区域</th>
                                        <th>订单数</th>
                                        <th>站点数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block layout:fragment="scripts">
    <script th:inline="javascript">
        let startTime = /*[[${startTime}]]*/ '';
        let endTime = /*[[${endTime}]]*/ '';
        
        // 初始化日期选择器
        $('#daterange').daterangepicker({
            startDate: moment(startTime),
            endDate: moment(endTime),
            locale: {
                format: 'YYYY-MM-DD',
                applyLabel: '确定',
                cancelLabel: '取消',
                customRangeLabel: '自定义范围'
            }
        }, function(start, end) {
            window.location.href = '/admin/statistics?startTime=' + start.format('YYYY-MM-DD') + '&endTime=' + end.format('YYYY-MM-DD');
        });

        // 加载图表和数据
        $(document).ready(function() {
            loadOrderTrend();
            loadItemDistribution();
            loadTopCollectors();
            loadTopStations();
            loadTopAreas();
        });

        // 订单趋势图
        function loadOrderTrend() {
            $.get('/admin/statistics/order-trend', {
                startTime: startTime,
                endTime: endTime
            }, function(data) {
                const chart = echarts.init(document.getElementById('orderTrendChart'));
                const option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.date)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(item => item.count),
                        type: 'line',
                        smooth: true
                    }]
                };
                chart.setOption(option);
            });
        }

        // 物品分布图
        function loadItemDistribution() {
            $.get('/admin/statistics/item-distribution', {
                startTime: startTime,
                endTime: endTime
            }, function(data) {
                const chart = echarts.init(document.getElementById('itemDistributionChart'));
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    series: [{
                        type: 'pie',
                        radius: '70%',
                        data: data.map(item => ({
                            name: item.name,
                            value: item.count
                        }))
                    }]
                };
                chart.setOption(option);
            });
        }

        // 加载回收员排名
        function loadTopCollectors() {
            $.get('/admin/statistics/top-collectors', {
                startTime: startTime,
                endTime: endTime
            }, function(data) {
                const tbody = $('#collectorTable tbody');
                tbody.empty();
                data.forEach((item, index) => {
                    tbody.append(`
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.name}</td>
                            <td>${item.orderCount}</td>
                            <td>${item.rating.toFixed(1)}</td>
                        </tr>
                    `);
                });
            });
        }

        // 加载回收站排名
        function loadTopStations() {
            $.get('/admin/statistics/top-stations', {
                startTime: startTime,
                endTime: endTime
            }, function(data) {
                const tbody = $('#stationTable tbody');
                tbody.empty();
                data.forEach((item, index) => {
                    tbody.append(`
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.name}</td>
                            <td>${item.orderCount}</td>
                            <td>${item.weight.toFixed(2)}</td>
                        </tr>
                    `);
                });
            });
        }

        // 加载区域排名
        function loadTopAreas() {
            $.get('/admin/statistics/top-areas', {
                startTime: startTime,
                endTime: endTime
            }, function(data) {
                const tbody = $('#areaTable tbody');
                tbody.empty();
                data.forEach((item, index) => {
                    tbody.append(`
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.name}</td>
                            <td>${item.orderCount}</td>
                            <td>${item.stationCount}</td>
                        </tr>
                    `);
                });
            });
        }

        // 导出报表
        function exportReport() {
            window.location.href = `/admin/statistics/export?startTime=${startTime}&endTime=${endTime}`;
        }
    </script>
</th:block>
</body>
</html> 